<script setup>
import { Message, MessageBox } from 'element-ui';
import BuildingArea from '@/components/EnterpriseInfo/BuildingArea.vue';
const props = defineProps({
  data: { type: Array, default: () => [] },
  showOperate: { type: Boolean, default: true },
  showFilter: { type: Boolean, default: true },
  treeTitle: { type: String, default: () => null },
});
const drawer = ref(false);
const defaultProps = ref({
  // 默认设置
  children: 'children',
  label: 'name',
});
const drawerTitle = ref('');
const currentData = ref(null);
const currentNode = ref(null);
const filterText = ref('');
const handleNodeClick = (data, node, e) => {
  console.log(data, node, e, 'data, node, e');
  currentData.value = data;
  currentNode.value = node;
};
const addSameNode = () => {
  drawerTitle.value = '新增';
  drawer.value = true;
};
const addChildNode = () => {
  drawerTitle.value = '新增';
  drawer.value = true;
};
const editNode = () => {
  drawerTitle.value = '编辑';
  drawer.value = true;
};
const removeNode = () => {
  MessageBox.confirm('删除后不可找回，是否确认删除', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {})
    .catch(() => {});
};
</script>
<template>
  <div class="et-box u-p20">
    <div v-if="treeTitle">{{ treeTitle }}</div>
    <el-input
      class="u-mb20"
      suffix-icon="el-icon-search"
      size="small"
      placeholder="查询"
      v-model="filterText"
    ></el-input>
    <div class="u-df-spb cursor u-mb20" v-if="showOperate">
      <span style="color: #00bcff" @click="addSameNode">新增同级</span>
      <span style="color: #76e612" @click="addChildNode">新增下级</span>
      <span style="color: #e59215" @click="editNode">编辑</span>
      <span style="color: #e61c1c" @click="removeNode">删除</span>
    </div>
    <el-tree :data="data" node-key="id" :props="defaultProps" :highlight-current="true" @node-click="handleNodeClick">
      <span class="custom-tree-node u-fs14" slot-scope="{ node, data }">{{ data.name }}</span>
    </el-tree>
    <el-drawer :visible.sync="drawer">
      <template slot="title">
        <div class="custom_title">{{ drawerTitle }}建筑区域结构</div>
      </template>
      <BuildingArea :currentNode="currentNode" :currentData="currentData"></BuildingArea>
    </el-drawer>
  </div>
</template>
<style lang="scss" scoped>
::v-deep .el-drawer__header {
  text-align: left !important;
  font-size: 16px !important;
  background-color: #242b41 !important;
  margin-bottom: 0 !important;
  padding: 20px !important;
  color: #fff;
}
::v-deep .el-drawer__body {
  background-color: #161e35 !important;
  padding: 20px !important;
}
</style>
